﻿{include file="public/header" /}
<link rel="stylesheet" href="__ADMIN__/zTree/zTreeStyle.css" type="text/css">
<title>角色管理</title>
</head>

<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 系统管理 <span class="c-gray en">&gt;</span> 角色管理
		<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="page-container">
		<div class="cl pd-5 bg-1 bk-gray"> <span class="l"> 
		<a class="btn btn-primary radius" href="javascript:;" onclick="admin_role_add('添加角色','{:url('admin_role_add')}','420','240')"><i class="Hui-iconfont">&#xe600;</i> 添加角色</a> </span> <span class="r"></span> </div>
		<table class="table table-border table-bordered table-hover table-bg">
			<thead>
				<tr>
					<th scope="col" colspan="6">角色管理</th>
				</tr>
				<tr class="text-c">
					<th width="40">ID</th>
					<th width="200">角色名</th>
					<th>状态</th>
					<th width="170">操作</th>
				</tr>
			</thead>
			<tbody>
				{volist name="data" id="vo" empty="这里没有数据"}
				<tr class="text-c">
					<td>{$vo.id}</td>
					<td>{$vo.title}</td>
					<td>
						{if condition="$vo.status eq 1"}
						<a class="red" href="javascript:;" onclick="rule_state({$vo.id});">
							<span class="label label-success radius">已启用</span>
						</a>
						{else/}
						<a class="red" href="javascript:;" onclick="rule_state({$vo.id});">
							<div id="zt{$vo.id}"><span class="label label-danger">禁用</span></div>
						</a>
						{/if}
					</td>
					<td class="f-14">
						{if condition="$vo.id neq 1"}
						<a title="权限分配" href="javascript:;" onclick="giveQx({$vo.id})" style="text-decoration:none"><i class="Hui-iconfont">&#xe61d;</i>&nbsp;&nbsp;&nbsp;&nbsp;
							<a title="编辑" href="javascript:;" onclick="admin_role_edit('角色编辑','{:url('users/admin_role_edit',['id'=>$vo.id])}','320','340')" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> &nbsp;&nbsp;&nbsp;&nbsp;
							<a title="删除" href="javascript:;" onclick="admin_role_del(this,{$vo.id})" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
					</td>
					{/if}
				</tr>
				{/volist}
			</tbody>
		</table>

		<!-- 角色分配 -->
		<div class="zTreeDemoBackground left" style="display: none" id="role">
			<input type="hidden" id="nodeid">
			<div class="form-group">
				<div class="col-sm-5 col-sm-offset-2">
					<ul id="treeType" class="ztree"></ul>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
					<input type="button" value="确认分配" class="btn btn-primary" id="postform" />
				</div>
			</div>
		</div>

	</div>
	{include file="public/footer" /}
	<script type="text/javascript">
		/*管理员-角色-添加*/
		function admin_role_add(title, url, w, h) {
			layer_show(title, url, w, h);
		}
		/*管理员-角色-编辑*/
		function admin_role_edit(title, url, w, h) {
			layer_show(title, url, w, h);
		}
		/*管理员-角色-删除*/

		function admin_role_del(obj, id) {
			layer.confirm('确认要删除吗？', {
				btn: ['确定', '取消'] //按钮
			}, function() {
				$.ajax({
					type: 'get',
					url: "{:url('users/admin_role_del')}",
					dataType: 'json',
					data: {
						id: id
					},
					success: function(data) {
						if(data.code == 200) {
							$(obj).parents("tr").remove();
							layer.msg(data.msg, {
								icon: 1,
								time: 1000
							});
						} else {
							layer.msg(data.msg, {
								icon: 1,
								time: 1000
							});
						}
						
					},
					error: function(data) {
						console.log(data.msg);
					}
				});
			});
		}

		zNodes = '';
		var index = '';
		var index2 = '';
		//分配权限
		function giveQx(id) {

			//加载层
			index2 = layer.load(0, {
				shade: false
			}); //0代表加载的风格，支持0-2
			//获取权限信息
			$.getJSON('role_edit', {
				'id': id
			}, function(res) {
				layer.close(index2);
				if(res.code == 200) {
					$("#nodeid").val(res.r_id);
					zNodes = JSON.parse(res.data); //将字符串转换成obj

					//页面层
					index = layer.open({
						type: 1,
						area: ['500px', '80%'],
						title: '权限分配',
						skin: 'layui-layer-demo', //加上边框
						content: $('#role')
					});

					//设置zetree
					var setting = {
						check: {
							enable: true
						},
						view: {
							dblClickExpand: true,
							showLine: true,
							showIcon: true,
							selectedMulti: false,
							fontCss: {
								"font-family": "微软雅黑",
								"font-size": "18px",
								"color": "red"
							}
						},
						data: {
							simpleData: {
								enable: true,
								idKey: "id",
								pIdKey: "pid",
								rootpid: ""
							},
							key: {
								name: "title"
							}
						}
					};

					$.fn.zTree.init($("#treeType"), setting, zNodes);
					var zTree = $.fn.zTree.getZTreeObj("treeType");
					zTree.expandAll(true);

				} else {
					layer.alert(res.msg);
				}

			});
		}

		//确认分配权限
		$("#postform").click(function() {
			var zTree = $.fn.zTree.getZTreeObj("treeType");
			var nodes = zTree.getCheckedNodes(true);
			var NodeString = '';
			$.each(nodes, function(n, value) {
				if(n > 0) {
					NodeString += ',';
				}
				NodeString += value.id;
			});
			var id = $("#nodeid").val();
			//写入库
			$.post('role_edit_ok', {
				'id': id,
				'rules': NodeString
			}, function(res) {
				layer.close(index);
				if(res.code == 200) {
					layer.msg(res.msg, {
						icon: 1,
						time: 1500,
						shade: 0.1
					}, function() {
						window.location.href = "";
					});
				} else {
					layer.msg(res.msg);
				}

			}, 'json')
		})
	</script>